<template>
	<div class="select_container">
		<!-- 添加标签对话框 -->
		<el-dialog title="选择建筑" :visible.sync="addVisible" width="40%" append-to-body>
			<div class="builds">
				<div v-for="(build, index) of AllBuilds" :key="build.id" class="build" @click="submitHandler(build)">
					<my-image :size="64" :icon="build.iconUrl" type="buildings"></my-image>
					<div class="text">
						{{ build.name }}
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- END添加标签对话框 -->
		<!-- 标签群 -->
		<div class="tags">
			<div v-for="(build, index) of buildList" :key="index" class="tag">
				<div class="image_container">
					<my-image :size="60" :icon="build.iconUrl" type="buildings"></my-image>
					<span class="out">
						<span class="inner_close">
							<i class="el-icon-circle-close" @click="deleteHandler(build.id)"></i>
						</span>
					</span>
				</div>
				<div class="text_container">
					{{ build.name }}
				</div>
			</div>
			<!-- 添加按钮 -->
			<div class="tag add_container" @click="addHandler">
				<i class="el-icon-plus"></i>
			</div>
		</div>
	</div>
	<!-- END标签群 -->
</template>

<script>
	import MyImage from "@/components/Image.vue";
	export default {
		name: "buildSelect",
		components: {
			MyImage
		},
		props: ["builds", "AllBuilds"],
		emits: ["update"],
		data() {
			return {
				isInputShow: false,
				buildList: this.builds,
				addVisible: false,
			};
		},
		methods: {
			deleteHandler(id) {
				this.buildList = this.buildList.filter((b) => b.id != id);
				this.$emit("update", this.buildList);
			},
			addHandler() {
				this.addVisible = true;
			},
			submitHandler(build) {
				this.buildList.push(build);
				this.$emit("update", this.buildList);
				this.addVisible = false;
			},
		},
		watch: {
			builds: {
				handler(newVal) {
					// console.log("buildList更新", newVal);
					this.buildList = JSON.parse(JSON.stringify(newVal));
				},
				immediate: true,
			},
		},
	};
</script>

<style lang="less" scoped>
	.builds {
		display: flex;
		flex-wrap: wrap;
		height: 300px;
		overflow: auto;

		.build {
			width: 64px;
			padding: 4px;
			margin: 4px;
			border: 1px solid gainsboro;
			border-radius: 4px;

			.text {
				line-height: 16px;
				font-size: 12px;
				text-align: center;
			}
		}


	}

	.select_container {

		.tags {
			width: 100%;
			display: flex;
			justify-content: start;
			flex-wrap: wrap;
			gap: 10px;
			align-items: center;

			.tag {
				position: relative;
				width: 80px;
				color: #409eff;
				border-radius: 4px;
				border: 1px solid #d9ecff;
				background-color: #ecf5ff;
				text-align: center;

				.image_container {
					height: 60px;

					&:hover {
						.out {
							color: red;
							display: inline-block;
						}
					}

					.out {
						position: absolute;
						left: 60px;
						line-height: 20px;
						font-size: large;
						display: none;
					}
				}

				.text_container {
					line-height: 20px;
				}

			}

			.add_container {
				line-height: 80px;
				text-align: center;
				font-size: large;
			}
		}
	}
</style>